<template>
    <div>
        <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>车间看板管理</el-breadcrumb-item>
        <el-breadcrumb-item>总览看板</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
		<el-row :gutter="20">
			<el-col :span="8">
				<div class="monitoring">
					<div>
						<div style="font-size: 26px;color: #ffffff;">
							产品监控
						</div>
						<div style="font-size: 5px;color: #ffffff;">
							PRODUCTION MONITORING
						</div>
					</div>
					<div id="monitoringech">
						
					</div>
				</div>
			</el-col>
			<el-col :span="8">
				<div class="order">
					<div>
						<div style="font-size: 26px;color: #ffffff;">
							今日交付订单
						</div>
						<div style="font-size: 5px;color: #ffffff;">
							DELIVERY ORDER
						</div>
					</div>
					<div style="display: flex;justify-content: space-around;width: 100%;">
						
						<div style="width: 50%;height: 100px;">
							<div style="margin-top: 8px;color: #7F9DFF;font-size: 14px;margin-left: 10px;">
								订单编号：<span style="color: #ffffff;">JD0210908090828</span>
							</div>
							<div style="margin-top: 8px;color: #7F9DFF;font-size: 14px;margin-left: 10px;">
								产品编号：<span style="color: #ffffff;">JCVDHS001</span>
							</div>
						</div>
						<div style="width: 50%;height: 100px;margin-right: 10px;">
							<div style="color: #40D22C;margin-left: 210px;">↑158</div>
							<el-progress :text-inside="true" :stroke-width="20" :percentage="20" color="#38A7FE"></el-progress>
							<div style="color: #7786B5;display: inline-block;margin-left: 5px;">0</div>
							<div style="color: #7786B5;margin-left: 200px;display: inline-block;">1700</div>
						</div>
					</div>
					<div style="display: flex;justify-content: space-around;width: 100%;">
						
						<div style="width: 50%;height: 100px;">
							<div style="margin-top: 8px;color: #7F9DFF;font-size: 14px;margin-left: 10px;">
								订单编号：<span style="color: #ffffff;">JD0210908090828</span>
							</div>
							<div style="margin-top: 8px;color: #7F9DFF;font-size: 14px;margin-left: 10px;">
								产品编号：<span style="color: #ffffff;">JD0210908090828</span>
							</div>
						</div>
						<div style="width: 50%;height: 100px;margin-right: 10px;">
							<div style="color: #D76152;margin-left: 210px;">↓158</div>
							<el-progress :text-inside="true" :stroke-width="20" :percentage="20" color="#38A7FE"></el-progress>
							<div style="color: #7786B5;display: inline-block;margin-left: 5px;">0</div>
							<div style="color: #7786B5;margin-left: 200px;display: inline-block;">1200</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :span="8">
				<div class="status">
					<div style="font-size: 26px;color: #ffffff;">
						设备实时状态
					</div>
					<div style="font-size: 5px;color: #ffffff;">
						REAL TIME STATUS
					</div>
					<div style="width: 100%;height: 200px;display: flex;justify-content: space-around;">
						<div id="statusech">
							
						</div>
						<div style="display: flex;justify-content:center ;flex-direction: column;height: 180px;">
							<div style="color:#7F9DFF;font-size: 14px;">
								正常运行：<span style="color: #ffffff;">50台</span>
							</div>
							<div style="margin-top: 10px;color:#7F9DFF;font-size: 14px;">
								暂未生产：<span style="color: #ffffff;">20台</span>
							</div>
							<div style="margin-top: 10px;color:#7F9DFF;font-size: 14px;">
								空闲设备：<span style="color: #ffffff;">20台</span>
							</div>
							<div style="margin-top: 10px;color:#7F9DFF;font-size: 14px;">
								故障设备：<span style="color: #ffffff;">20台</span>
							</div>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="14">
				<div class="bigger">
					<el-row :gutter="20">
						<el-col :span="14">
							<div class="efficiency">
								<div style="font-size: 26px;color: #ffffff;">
									当前产品效率分布图
								</div>
								<div style="font-size: 5px;color: #ffffff;">
									PRODUCT EFFICIENCY
								</div>
								<div style="width: 100%;height: 200px;display: flex;justify-content: space-around;">
									<div id="efficiencyech">
										
									</div>
									<div style="display: flex;justify-content:center ;flex-direction: column;height: 180px;">
										<div style="color:#7F9DFF ;font-size: 14px;">
											产品名称1：<span style="color: #ffffff;">60件 占比60%</span>
										</div>
										<div style="margin-top: 10px;color:#7F9DFF ;font-size: 14px;">
											产品名称2：<span style="color: #ffffff;">20件 占比20%</span>
										</div>
										<div style="margin-top: 10px;color:#7F9DFF ;font-size: 14px;">
											产品名称3：<span style="color: #ffffff;">10件 占比10%</span>
										</div>
										<div style="margin-top: 10px;color:#7F9DFF ;font-size: 14px;">
											产品名称4：<span style="color: #ffffff;">5件 占比5%</span>
										</div>
										<div style="margin-top: 10px;color:#7F9DFF ;font-size: 14px;">
											产品名称5：<span style="color: #ffffff;">5件 占比5%</span>
										</div>
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="10">
							<div class="attendance">
								<div style="position: relative;">
									<div style="font-size: 26px;color: #ffffff;">
										出勤情况
									</div>
									<div style="font-size: 5px;color: #ffffff;">
										ATTENDANCE
									</div>
									<div style="left: 50%;transform: translateX(-50%);position: absolute;">
										<el-progress type="circle" :percentage="91" class="circle" color="#6969FF">
											<h1 style="color: #7F9DFF;">出勤率</h1>
											<h1 style="color: #ffffff;">91%</h1>
										</el-progress>
									</div>
									<div style="width: 100%;margin: 130px 10px 0px 10px;">
										<div style="color: #ffffff;font-size: 14px;">
											当前在岗人数
											<el-progress percentage="91" color="#00C2A4" stroke-linecap="square"></el-progress>
										</div>
										<div style="color: #ffffff;font-size: 14px;">
											当前请假人数
											<el-progress percentage="91" color="#005983" stroke-linecap="square"></el-progress>
										</div>
									</div>
								</div>
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="10">
							<div class="analysis">
								<div>
									<div style="font-size: 26px;color: #ffffff;">
										近一个月产能分析
									</div>
									<div style="font-size: 5px;color: #ffffff;">
										CAPACITY ANALYSIS
									</div>
								</div>
								<div id="analysisech">
									
								</div>
							</div>
						</el-col>
						<el-col :span="14">
							<div class="plan">
								<div>
									<div style="font-size: 26px;color: #ffffff;">
										宏观计划
									</div>
									<div style="font-size: 5px;color: #ffffff;">
										MACRO PLAN
									</div>
								</div>
								<div id="planech">
									
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-col>
			<el-col :span="10">
				<div class="detection">
					<div>
						<div style="font-size: 26px;color: #ffffff;">
							最近检测工单跟踪
						</div>
						<div style="font-size: 5px;color: #ffffff;">
							WORK ORDER DETECTION
						</div>
					</div>
					<el-table :data="worktableData" style="width: 100%" :cell-style="{color:'#ffffff',fontSize:'14px'}" :header-cell-style="{color:'#ffffff',fontSize:'16px',fontWeight:'Bold'}">
						<el-table-column prop="no" label="订单号" width="120">
						</el-table-column>
						<el-table-column prop="name" label="产品名称" width="120">
						</el-table-column>
						<el-table-column prop="serial" label="产品编号" width="120">
						</el-table-column>
						<el-table-column prop="plan" label="计划数量" width="100">
						</el-table-column>
						<el-table-column prop="accomplish" label="完成数量" width="100">
						</el-table-column>
						<el-table-column prop="YIELD" label="合格率" width="100">
						</el-table-column>
					</el-table>
				</div>
			</el-col>
		</el-row>
    </el-card>
    </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
		worktableData:[{
			no:'1022336486',
			name:'XXX清洗器',
			serial:'AS45156',
			plan:'1300',
			accomplish:'3000',
			YIELD:'80%'
		},{
			no:'1022336486',
			name:'XXX清洗器',
			serial:'AS45156',
			plan:'1300',
			accomplish:'3000',
			YIELD:'80%'
		},{
			no:'1022336486',
			name:'XXX清洗器',
			serial:'AS45156',
			plan:'1300',
			accomplish:'3000',
			YIELD:'80%'
		},{
			no:'1022336486',
			name:'XXX清洗器',
			serial:'AS45156',
			plan:'1300',
			accomplish:'3000',
			YIELD:'80%'
		},{
			no:'1022336486',
			name:'XXX清洗器',
			serial:'AS45156',
			plan:'1300',
			accomplish:'3000',
			YIELD:'80%'
		},{
			no:'1022336486',
			name:'XXX清洗器',
			serial:'AS45156',
			plan:'1300',
			accomplish:'3000',
			YIELD:'80%'
		},{
			no:'1022336486',
			name:'XXX清洗器',
			serial:'AS45156',
			plan:'1300',
			accomplish:'3000',
			YIELD:'80%'
		},{
			no:'1022336486',
			name:'XXX清洗器',
			serial:'AS45156',
			plan:'1300',
			accomplish:'3000',
			YIELD:'80%'
		},{
			no:'1022336486',
			name:'XXX清洗器',
			serial:'AS45156',
			plan:'1300',
			accomplish:'3000',
			YIELD:'80%'
		}]
    }
  },
  mounted () {
	 this. getmonitoringech(),
	 this.getstatusech(),
	 this.getefficiencyech(),
	 this.getanalysisech(),
	 this.getplanech()
  },
  methods: {
	  getmonitoringech(){
		// 基于准备好的dom，初始化echarts实例
		var myChart = this.$echarts.init(document.getElementById("monitoringech"));
		// 绘制图表
		myChart.setOption({
			yAxis: {
				type: 'category',
				data: ['当前估计产量', '当前实际产品', '差异']
			},
			xAxis: {
				splitLine: {
					show: true
				},
				axisLabel: {
					show: true
				},
				axisTick: {
					show: true
				},
				axisLine: {
					show: false
				}
			},
			series: [{
				data: [300, 180, 120],
				type: 'bar',
				barWidth: 20,
				
			}],
			grid:{
				top:0,
			}
		});
	  },
	  getstatusech() {
	  		  // 基于准备好的dom，初始化echarts实例
	  		  var myChart = this.$echarts.init(document.getElementById("statusech"));
	  		  // 绘制图表
	  		  myChart.setOption({
	  		  	 tooltip: {
	  		  	        trigger: 'item'
	  		  	    },
	  		  	    series: [
	  		  	        {
	  		  	            name: '访问来源',
	  		  	            type: 'pie',
	  		  	            radius: ['40%', '70%'],
	  		  	            avoidLabelOverlap: false,
	  		  	            emphasis: {
	  		  	                label: {
	  		  	                    show: true,
	  		  	                    fontSize: '40',
	  		  	                    fontWeight: 'bold'
	  		  	                }
	  		  	            },
	  		  	            labelLine: {
	  		  	                show: true,
	  		  	            },
	  		  	            data: [
	  		  	                {value: 50, name: '50%'},
	  		  	                {value: 20, name: '20%'},
	  		  	                {value: 20, name: '20%'},
	  		  	                {value: 10, name: '10%'},
	  		  	            ]
	  		  	        }
	  		  	    ]
	  		  });
	  },
	  getefficiencyech() {
		  // 基于准备好的dom，初始化echarts实例
		  var myChart = this.$echarts.init(document.getElementById("efficiencyech"));
		  // 绘制图表
		  myChart.setOption({
		  	     radar: {
		  	         // shape: 'circle',
		  	         indicator: [
		  	             { name: '产品1', max: 100},
		  	             { name: '产品2', max: 100},
		  	             { name: '产品3', max: 100},
		  	             { name: '产品4', max: 100},
		  	             { name: '产品5', max: 100}
		  	         ]
		  	     },
		  	     series: [{
		  	         type: 'radar',
		  	         data: [
		  	             {
		  	                 value: [60, 20, 100,50,50],
		  	             }
		  	       
		  	         ]
		  	     }]
		  });
	  },
	  getanalysisech() {
		  // 基于准备好的dom，初始化echarts实例
		  var myChart = this.$echarts.init(document.getElementById("analysisech"));
		  // 绘制图表
		  myChart.setOption({
		  	    tooltip: {
		  	        trigger: 'axis',
		  	        axisPointer: {
		  	            type: 'shadow'
		  	        }
		  	    },
		  	    legend: {
		  	        data: ['计划检测工单数', '完成检测工单数'],
		  	    },
		  	    grid: {
		  	        left: '3%',
		  	        right: '4%',
		  	        bottom: '3%',
		  	        containLabel: true
		  	    },
		  	    yAxis: {
		  	        type: 'value',
		  	        boundaryGap: [0, 0.01],
					splitLine: {
						show: false
					},
					axisLabel: {
						show: true
					},
					axisTick: {
						show: true
					},
					axisLine: {
						show: true
					}
		  	    },
		  	    xAxis: {
		  	        type: 'category',
		  	        data: ['8.22', '8.23', '8.24', '8.25', '8.26', '8.27']
		  	    },
		  	    series: [
		  	        {
		  	            name: '计划检测工单数',
		  	            type: 'bar',
		  	            data: [2, 1, 2, 1, 2, 2]
		  	        },
		  	        {
		  	            name: '完成检测工单数',
		  	            type: 'bar',
		  	            data: [3, 5, 3, 4, 3, 4]
		  	        }
		  	    ]
		  });
	  },
	  getplanech() {
		  // 基于准备好的dom，初始化echarts实例
		  var myChart = this.$echarts.init(document.getElementById("planech"));
		  // 绘制图表
		  myChart.setOption({
		  	    tooltip: {
		  	        trigger: 'axis',
		  	        axisPointer: {
		  	            type: 'shadow'
		  	        }
		  	    },
		  	    legend: {
		  	        data: ['计划检测工单数', '完成检测工单数'],
		  	    },
		  	    grid: {
		  	        left: '3%',
		  	        right: '4%',
		  	        bottom: '3%',
		  	        containLabel: true
		  	    },
		  	    yAxis: {
		  	        type: 'value',
		  	        boundaryGap: [0, 0.01],
		  					splitLine: {
		  						show: false
		  					},
		  					axisLabel: {
		  						show: true
		  					},
		  					axisTick: {
		  						show: true
		  					},
		  					axisLine: {
		  						show: true
		  					}
		  	    },
		  	    xAxis: {
		  	        type: 'category',
		  	        data: ['8.22', '8.23', '8.24', '8.25', '8.26', '8.27']
		  	    },
		  	    series: [
		  	        {
		  	            name: '计划检测工单数',
		  	            type: 'bar',
		  	            data: [2, 1, 2, 1, 2, 2]
		  	        },
		  	        {
		  	            name: '完成检测工单数',
		  	            type: 'bar',
		  	            data: [3, 5, 3, 4, 3, 4]
		  	        }
		  	    ]
		  });
	  }
  }
}
</script>

<style lang="less" scoped>
	/deep/.el-card__body{
		background-color: #031331;
	}
	/deep/.el-table__body-wrapper{
		background-color: #091835;
	}
	/deep/.el-table__row{
		background-color: #091835;
	}
	/deep/.el-table td{
	border-bottom: 1px solid #091835; 
	}
	/deep/.el-table th{
	border-bottom: 1px solid #091835; 
	}
	/deep/.el-table--border::after, .el-table--group::after, .el-table::before{
		    background-color: #091835;
	}
	/deep/.el-table__header-wrapper{
		background-color: #091835;
	}
	/deep/.is-leaf{
		background-color: #091835;
	}
.monitoring {
	height: 250px;
	background-color: #091835;
	#monitoringech {
		width: 100%;
		height: 210px;
	}
}
.order {
	height: 250px;
	background-color: #091835;
}
.status {
	height: 250px;
	background-color: #091835;
	#statusech {
		width: 260px;
		height: 200px;
	}
}
.bigger {
	height: 510px;
	margin-top: 20px;
	.efficiency {
		height: 250px;
		background-color: #091835;
		#efficiencyech {
			width: 260px;
			height: 200px;
		}
	}
	.attendance {
		height: 250px;
		background-color: #091835;
	}
	.analysis {
		height: 250px;
		margin-top: 20px;
		background-color: #091835;
		#analysisech {
			width: 100%;
			height: 200px;
		}
	}
	.plan {
		height: 250px;
		margin-top: 20px;
		background-color: #091835;
		#planech {
			width: 100%;
			height: 200px;
		}
	}
}
.detection {
	height: 515px;
	margin-top: 20px;
	background-color: #091835;
}
</style>
